<template>
    <view class="content">
        <u-navbar :is-back="true" back-icon-color="#fff" :title="data.name" :background="background" :border-bottom="false" 
            title-color="#fff" title-size="30" immersive="true">
            <view slot="right" style="padding-right: 20rpx;font-size: 28rpx; color: #fff;" @click="toShare">
                分享
            </view>
        </u-navbar>
        <!-- 轮播 -->
        <u-swiper :list="data.images" height="557" interval="5000" duration="700" border-radius="0" 
            indicator-pos="bottomRight" mode="number"></u-swiper>
            
        <view class="wrapper">
            <view class="t-name">{{data.name}}</view>
            
            <!-- 标签 -->
            <view class="label">
                <view class="label-text label-first" v-if="data.sale">{{data.sale}}</view>
                <view class="label-text" v-if="data.project">{{data.project}}</view>
                <view class="label-text" v-for="(item,index) in data.labels" :key="index">{{item}}</view>
            </view>
            
            <view class="price" v-if="data.unit_price">
                单价 <text class="price-num">{{data.unit_price}}</text>元/㎡
            </view>
            
            <view class="other">
                <view class="other-n" v-if="data.house_type">
                    <view class="other-n-l">户型</view>
                    <view class="u-flex-1">{{data.house_type}}</view>
                </view>
                <view class="other-n" v-if="data.house_area">
                    <view class="other-n-l">建面</view>
                    <view class="u-flex-1">{{data.house_area}}㎡</view>
                </view>
                <view class="other-n" v-if="data.open_date">
                    <view class="other-n-l">开盘</view>
                    <view class="u-flex-1">{{data.open_date}}</view>
                </view>
                <view class="other-n" v-if="data.delivery_date">
                    <view class="other-n-l">交房</view>
                    <view class="u-flex-1">{{data.delivery_date}}</view>
                </view>
            </view>
            
            <!-- 地图/周边 -->
            <view class="add">
                <image src="../../static/image/index_11.png" class="index-11"></image>
                <view class="add-box">
                    <view class="add-tit">{{data.name}}</view>
                    <view class="add-text">{{data.address}}</view>
                </view>
            </view>
            
            <view class="more-info" @click="toPage('/pages/index/house-info-details?id=' + id)">更多详细信息</view>
            
            <!-- 佣金方案 -->
            <view class="yj">
                <image src="../../static/image/index_12.png" class="index-12" @click="toPage('/pages/index/commission?id=' + id)"></image>
                <view class="yj-box">
                    <!-- <view class="yj-text">佣金计算规则：10000元/套</view> -->
                    <view class="yj-down">
                        <view class="yj-down-i border-r">
                            <image src="../../static/image/index_09.png" class="index-09"></image>
                            <view>二期住宅</view>
                        </view>
                        <view class="yj-down-i">
                            <image src="../../static/image/index_10.png" class="index-09"></image>
                            <view>基础方案</view>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 合作平台 -->
            <image src="../../static/image/index_13.png" class="index-13" @click="toPage('/pages/index/cooperate-rule?id=' + id)"></image>
            
            <!-- 其他户型 -->
            <view class="house">
                <view class="house-top">
                    <view>其他户型</view>
                    <!-- <view class="u-flex">
                        <view class="house-more">查看更多</view>
                        <image src="../../static/icon/arrow_r_01.png" class="arrow-r-01"></image>
                    </view> -->
                </view>
                <view class="house-nav">
                    <scroll-view scroll-x>
                        <view class="house-nav-i">
                            <view class="house-nav-i2" :class="{isNav : houseTypeId == item.id}" 
                                v-for="(item, index) in data.house_type_merge" :key="index" 
                                @click="change(item)">{{item.type}}（{{item.count}}）</view>
                        </view>
                    </scroll-view>
                </view>
                <view class="house-img">
                    <scroll-view scroll-x>
                        <view class="house-img-i">
                            <view class="house-img-i2" v-for="(item, index) in houseTypeList" :key="index" 
                                @click="toPage('/pages/index/house-details?id=' + item.id)">
                                <image :src="item.image" class="del-11"></image>
                                <view>
                                    {{item.name}}<text class="u-p-l-15">{{item.house_area}}㎡</text>
                                </view>
                                <view class="house-price">
                                    <text class="house-price-num">{{item.price}}</text>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            
            <!-- 周边配套 -->
            <view class="house u-p-t-40">
                <view class="house-top">
                    <view>周边配套</view>
                    <view class="u-flex" @click="toPage('/pages/index/floor-map?latitude=' + data.latitude + '&longitude=' + data.longitude)">
                        <view class="house-more">查看更多</view>
                        <image src="../../static/icon/arrow_r_01.png" class="arrow-r-01"></image>
                    </view>
                </view>
                <view class="house-img">
                    <scroll-view scroll-x>
                        <view class="house-img-i">
                            <view class="pt">
                                <image src="../../static/image/index_14.png" class="index-14"></image>
                                <view>公交</view>
                            </view>
                            <view class="pt">
                                <image src="../../static/image/index_17.png" class="index-14"></image>
                                <view>学校</view>
                            </view>
                            <view class="pt">
                                <image src="../../static/image/index_15.png" class="index-14"></image>
                                <view>餐饮</view>
                            </view>
                            <view class="pt">
                                <image src="../../static/image/index_16.png" class="index-14"></image>
                                <view>购物</view>
                            </view>
                            <view class="pt">
                                <image src="../../static/image/index_18.png" class="index-14"></image>
                                <view>医院</view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <view class="map" @click="toPage('/pages/index/floor-map?latitude=' + data.latitude + '&longitude=' + data.longitude)">
                    <view class="u-flex">
                        <image src="../../static/image/index_19.png" class="index-19"></image>
                        <view>前往地图查看</view>
                    </view>
                    <image src="../../static/icon/arrow_r_01.png" class="arrow-r-01"></image>
                </view>
            </view>
            
            <!-- 楼盘推荐 -->
            <view class="sell">
                <view class="sell-nav">
                    <view :class="{active : type == 1}" @click="chooseNav(1)">周边楼盘推荐</view>
                    <view :class="{active : type == 2}" @click="chooseNav(2)">相似楼盘推荐</view>
                </view>
                <view class="item" v-for="(item, index) in list" :key="index" @click="$gTo('/pages/index/floor-details?id=' + item.id)">
                    <image :src="item.image" class="del-09"></image>
                    <view>
                        <view class="u-flex u-row-between u-col-center">
                            <view>
                                <view class="name">{{item.name}}</view>
                                <view class="area">{{item.region_name}} · {{item.unit_price}}元/m²</view>
                            </view>
                            <!-- <view class="baobei">报备</view> -->
                        </view>
                        <view class="sell-price">
                            <view>
                                <text class="p-l">{{item.commission_price}}</text>
                                <!-- <text class="p-l-r">万元</text> -->
                                <text>/套佣金</text>
                            </view>
                            <view class="plan">{{item.commission_num}}个方案</view>
                        </view>
                    </view>
                </view>
                <view class="none" v-if="list.length == 0">暂无相关信息</view>
            </view>
        </view>
        
        <!-- 底部 -->
        <view class="footer" v-if="share == 0">
            <view class="footer-l">
                <image src="../../static/icon/news.png" class="news"></image>
                <view>微聊驻场</view>
            </view>
            <view class="footer-l" @click="$call(data.phone)">
                <image src="../../static/icon/tel_01.png" class="news"></image>
                <view>致电驻场</view>
            </view>
            <view class="footer-r" v-if="role == 3 || role == 4 || role == 7" @click.stop="$gTo('/staff/pages/resident/edit-floor?id='+ id)">
                <image src="../../static/icon/write.png" class="write"></image>
                <view>修改详情</view>
            </view>
            <view class="footer-r" v-else @click.stop="$gTo('/pages/index/report?id='+ id)">
                <image src="../../static/icon/write.png" class="write"></image>
                <view>报备客户</view>
            </view>
        </view>
        
        <!-- 已分享 -->
        <view class="footer u-flex u-row-between u-col-center" v-if="share == 1">
            <view class="footer-l-s">
                <image src="../../static/icon/avatar_02.png" class="avatar-02"></image>
                <view>
                    <view class="f-s-n">分享人名称</view>
                    <view class="f-s-c">机构名称</view>
                </view>
            </view>
            <view class="footer-r-s" @click="$call(data.phone)">
                <image src="../../static/icon/tel_02.png" class="tel-02"></image>
                <view>电话咨询</view>
            </view>
        </view>
        
        <!-- 分享弹窗 -->
        <u-popup v-model="show" mode="bottom" border-radius="20" height="350rpx">
            <view class="pop-box">
                <view class="pop-top">
                    <view>
                        <image src="../../static/icon/weixin.png" class="pop-icon"></image>
                        <view>分享好友</view>
                    </view>
                    <view>
                        <image src="../../static/icon/pyq.png" class="pop-icon"></image>
                        <view>分享朋友圈</view>
                    </view>
                    <view>
                        <image src="../../static/icon/hb.png" class="hb-icon"></image>
                        <view class="u-p-t-15">生成海报</view>
                    </view>
                </view>
                <view class="pop-close" @click="show = false">关闭</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                type: 1,
                show: false,
                id: '',
                data: {},
                houseTypeList: [],//其他户型
                houseTypeId: '',
                list: [],//周边/相似
                keyword: '',
                role: '',
                share: 0,
            };
        },
        onLoad(option) {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            // 3项目驻场 4项目总监 7管理员 进入
            if (option.role) {
                this.role = option.role
            }
            // 判断是通过分享进入的
            if (option.share) {
                this.share = 1
            }
            this.id = option.id
            this.getData()
        },
        onShareAppMessage(res) {
        	let _this = this;
        	return {
                title: this.data.name,
                imageUrl: this.data.image,
                path: '/pages/index/floor-details?id=' + _this.id + '&share=1'
        	}
        },
        methods: {
            getLocation(latitude,longitude) {
                // uni.request({
                //     // url: "https://restapi.amap.com/v3/place/around",
                //     url: "https://restapi.amap.com/v3/geocode/regeo",
                //     method: "GET",
                //     data: {
                //         key: '516b0009962df57b3305ce569232546a',
                //         location: {
                //             latitude: latitude,
                //             longitude: longitude
                //         }
                //     },
                //     success: (res) => {
                //         console.log('周边',res)
                //     },
                //     fail: err => {
                //     	console.log(err)
                //     }
                // });
                
                
                this.$amapPlugin.getPoiAround({
                    location: {
                        latitude: latitude,
                        longitude: longitude
                    },
                    // get_poi: 1,//是否返回周边列表
                	success: res => {
                        console.log('周边',res)
                	},
                	fail: err => {
                		console.log(err)
                	}
                });
                
                
                // uni.getLocation({
                // 	type: 'gcj02',
                // 	success: (res) => {
                //         console.log(res)
                // 		// this.$amapFile.getRegeo({
                // 		// 	location: `${res.longitude},${res.latitude}`,
                //   //           get_poi: 1,//是否返回周边列表
                // 		// 	success: data => {
                //   //               console.log(data)
                // 		// 	},
                // 		// 	fail: err => {
                // 		// 		console.log(err)
                // 		// 	}
                // 		// });
                // 	}
                // });
            },
            
            toPage(url) {
                this.$gTo(url)
            },
            
            // 分享
            toShare() {
                this.show = true
            },
            // 切换推荐楼盘
            chooseNav(num) {
                this.type = num
                if (num == 1) this.list = this.data.periphery
                if (num == 2) this.list = this.data.be_similar
            },
            
            // 切换其他户型
            change(item) {
                this.houseTypeList = item.house_type
                this.houseTypeId = item.id
            },
            
            getData() {
                this.$ajax('properties_detail', {
                    user_token: this.$getSync('userToken'),
                    id: this.id,//楼盘id
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.data = ret.detail
                        
                        if (ret.detail && ret.detail.house_type_merge && ret.detail.house_type_merge.length > 0) {
                            this.houseTypeList = ret.detail.house_type_merge[0].house_type
                            this.houseTypeId = ret.detail.house_type_merge[0].id
                        }
                        
                        this.list = ret.detail.periphery
                        
                        let latitude = Number(this.data.latitude).toFixed(4)
                        let longitude = Number(this.data.longitude).toFixed(4)
                        // this.getLocation(latitude,longitude)
                        // this.getLocation(43.8332,125.2884)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(49,153,245,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(49,153,245,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
    .none{
    	text-align: center;
    	padding: 30upx 0;
    	box-sizing: border-box;
    	color: #999;
    	font-size: 24upx;
    }
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding-bottom: 100px;
    }
    .wrapper{
        background-color: #fff;
        padding: 40rpx 30rpx 10rpx;
        font-size: 28rpx;
    }
    .t-name{
        font-size: 40rpx;
        font-weight: bold;
        padding-bottom: 20rpx;
    }
    .label{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
    }
    .label-text{
        font-size: 22rpx;
        line-height: 1;
        padding: 10rpx 15rpx;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
        background-color: #f6f6f6;
    }
    .label-first{
        color: #ef4034;
        background-color: #fff0ef;
    }
    .price{
        padding: 15rpx 0 25rpx;
    }
    .price-num{
        font-size: 38rpx;
        font-weight: bold;
        color: #ef4034;
        padding: 0 7rpx 0 20rpx;
    }
    .other{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .other-n{
        width: calc(690rpx / 2);
        padding-bottom: 25rpx;
        padding-right: 5rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .other-n-l{
        color: #747272;
        padding-right: 20rpx;
    }
    
    .add{
        padding-bottom: 25rpx;
        position: relative;
    }
    .index-11{
        width: 686rpx;
        height: 127rpx;
    }
    .add-box{
        width: 510rpx;
        position: absolute;
        top: 25rpx;
        left: 25rpx;
    }
    .add-tit{
        font-size: 30rpx;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .add-text{
        font-size: 25rpx;
        color: #747272;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .more-info{
        color: #00a1e9;
        margin-bottom: 25rpx;
        padding: 25rpx;
        background-color: #effaff;
        border-radius: 10rpx;
        text-align: center;
    }
    
    .yj{
        position: relative;
    }
    .index-12{
        width: 686rpx;
        height: 288rpx;
    }
    .yj-box{
        position: absolute;
        left: 7rpx;
        bottom: 9rpx;
        width: 672rpx;
    }
    .yj-text{
        font-size: 24rpx;
        color: #188493;
        padding-bottom: 20rpx;
        padding-left: 23rpx;
    }
    .yj-down{
        background-color: #fff;
        border-radius: 15rpx;
        padding: 30rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .yj-down-i{
        width: calc(672rpx / 2);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
    }
    .border-r{
        border-right: 2rpx solid #c4d3d5;
    }
    .index-09{
        width: 73rpx;
        height: 73rpx;
        margin-right: 20rpx;
    }
    
    .index-13{
        width: 686rpx;
        height: 140rpx;
        margin: 25rpx 0;
    }
    
    .house{
        padding-top: 15rpx;
    }
    .house-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 36rpx;
        font-weight: bold;
        padding-bottom: 20rpx;
    }
    .house-more{
        font-size: 26rpx;
        font-weight: normal;
        color: #616161;
        padding-right: 10rpx;
    }
    .arrow-r-01{
        width: 8rpx;
        height: 15rpx;
    }
    .house-nav{
        width: 690rpx;
        white-space: nowrap;
        padding-bottom: 20rpx;
    }
    .house-nav-i{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }
    .house-nav-i2{
        background-color: #f6f6f6;
        font-size: 25rpx;
        line-height: 1;
        color: #424242;
        border-radius: 50rpx;
        margin-right: 20rpx;
        padding: 13rpx 15rpx;
    }
    .isNav{
        color: #fff;
        background-color: #00a1e9;
    }
    .house-img{
        width: 690rpx;
        white-space: nowrap;
    }
    .house-img-i{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .house-img-i2{
        width: 330rpx;
        margin-right: 20rpx;
        font-size: 30rpx;
        font-weight: bold;
        word-break: break-all;
        white-space: pre-line;
    }
    .del-11{
        width: 330rpx;
        height: 234rpx;
        border: 2rpx solid #e6e6e6;
        border-radius: 10rpx;
        margin-bottom: 10rpx;
    }
    .house-price{
        font-size: 24rpx;
        font-weight: normal;
        color: #fe3c3c;
        padding-top: 7rpx;
    }
    .house-price-num{
        font-size: 36rpx;
        font-weight: bold;
    }
    
    .pt{
        padding: 15rpx 30rpx;
        border-radius: 20rpx;
        background-color: #f6f6f6;
        margin-right: 25rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        line-height: 1;
        color: #212d45;
    }
    .index-14{
        width: 53rpx;
        height: 53rpx;
        margin-bottom: 5rpx;
    }
    
    .map{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 17rpx 30rpx;
        border: 2rpx solid #e6e6e6;
        border-radius: 15rpx;
        margin: 20rpx 0 30rpx;
    }
    .index-19{
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
    }
    
    .sell{
        padding-top: 15rpx;
    }
    .sell-nav{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 50rpx;
        font-size: 32rpx;
        color: #808080;
    }
    .sell-nav>view{
        position: relative;
        padding-right: 50rpx;
    }
    .active{
        font-size: 36rpx;
        font-weight: bold;
        color: #000;
    }
    .active::after{
        display: block;
        content: '';
        width: 50rpx;
        height: 10rpx;
        background-color: #00a1e9;
        border-radius: 50rpx;
        position: absolute;
        bottom: -20rpx;
        left: 82rpx;
        // transform: translateX(-50%);
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 45rpx;
    }
    .del-09{
        width: 213rpx;
        height: 158rpx;
        border-radius: 10rpx;
        margin-right: 15rpx;
    }
    .name{
        font-size: 32rpx;
        font-weight: bold;
        width: 445rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .area{
        padding: 15rpx 0;
        font-size: 24rpx;
        width: 445rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    // .baobei{
    //     padding: 15rpx 30rpx;
    //     font-size: 27rpx;
    //     color: #803906;
    //     background-color: #ffecd2;
    //     border-radius: 15rpx;
    // }
    .sell-price{
        font-size: 24rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .p-l{
        color: #fe3c3c;
        font-size: 36rpx;
        font-weight: bold;
    }
    .p-l-r{
        color: #fe3c3c;
        padding: 0 5rpx;
    }
    .plan{
        color: #5f8fbe;
        font-size: 23rpx;
        line-height: 1;
        padding: 4rpx 13rpx;
        border: 2rpx solid #5f8fbe;
        border-radius: 5rpx;
        margin-left: 12rpx;
    }
    
    
    .footer{
        width: 100vw;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10rpx 20rpx;
    }
    .footer-l{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 23rpx;
        color: #696969;
    }
    .news{
        width: 35rpx;
        height: 35rpx;
        margin-bottom: 5rpx;
    }
    .footer-r{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20rpx 80rpx;
        background-color: #00a1e9;
        border-radius: 10rpx;
        color: #fff;
    }
    .write{
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
    }
    
    .footer-l-s{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .avatar-02{
        width: 49rpx;
        height: 49rpx;
        border-radius: 50%;
        margin-right: 10rpx;
    }
    .f-s-n{
        width: 330rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 24rpx;
        font-weight: bold;
    }
    .f-s-c{
        width: 330rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 22rpx;
        color: #696969;
    }
    .footer-r-s{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20rpx 50rpx;
        background-color: #3dc489;
        border-radius: 10rpx;
        color: #fff;
    }
    .tel-02{
        width: 30rpx;
        height: 30rpx;
        margin-right: 20rpx;
    }
    
    // 分享弹窗
    .pop-box{
        background-color: #f5f5f5;
        width: 100vw;
    }
    .pop-top{
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 50rpx 0 35rpx;
    }
    .pop-top>view{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color: #424d5a;
    }
    // .pop-top>view:first-child{
    //     padding-right: 130rpx;
    // }
    .pop-icon{
        width: 104rpx;
        height: 104rpx;
        margin-bottom: 15rpx;
    }
    .hb-icon{
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 15rpx;
    }
    .pop-close{
        font-size: 28rpx;
        color: #424d5a;
        padding: 30rpx 0;
        border-top: 2rpx solid #e6e6e6;
        text-align: center;
    }
    
</style>
